<script setup lang="tsx">
// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 模块导入 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

import type { DataTableColumns } from 'naive-ui';
import { computed, ref, watch } from 'vue';
import { fetchGetCjProjectProgress } from '@/service/api';
import ProgressSearch from './progress-search.vue';

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 组件名称 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

defineOptions({
  name: 'SamplingProgressTableView'
});

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 类型常量 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 组合式函数 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 父子传参 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

interface Props {
  projectData: Api.Sampling.CjProject.ProjectTreeData;
}

const props = defineProps<Props>();

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 框架模型 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

function createNumericMap() {
  return {
    '1': 0,
    '2': 0,
    '3': 0,
    '4': 0,
    '5': 0,
    '6': 0,
    '7': 0
  };
}

let columns = createColumns();

function createColumns(): DataTableColumns<Api.Sampling.CjProject.ProgressVO> {
  return [
    {
      key: 'index',
      title: '序号',
      align: 'center',
      width: 80,
      titleAlign: 'center',
      render: row => row.index,
      cellProps: rowData => {
        const o: any = {};
        if (rowData.index === 0) {
          o.style = {
            backgroundColor: '#fedb61'
          };
        }
        return o;
      }
    },
    {
      title: '承担单位',
      key: 'orgName',
      titleAlign: 'center',
      align: 'left',
      render: row =>
        `${row.provinceCityCountyInfo.provinceName ?? ''}${row.provinceCityCountyInfo.cityName ?? ''}${row.provinceCityCountyInfo.countyName ?? ''}`,
      cellProps: rowData => {
        const o: any = {};
        if (rowData.index === 0) {
          o.style = {
            backgroundColor: '#fedb61'
          };
        }
        return o;
      }
    },
    {
      title: `任务已分配`,
      key: 'taskStatusCounts.1',
      width: 110,
      titleAlign: 'center',
      align: 'right',
      render: row => row.taskStatusCountMap['1'] ?? 0,
      cellProps: rowData => {
        const o: any = {};
        if (rowData.index === 0) {
          o.style = {
            backgroundColor: '#fedb61'
          };
        }
        return o;
      }
    },
    {
      title: `采样记录编辑中`,
      key: 'taskStatusCounts.2',
      width: 120,
      titleAlign: 'center',
      align: 'right',
      render: row => row.taskStatusCountMap['2'] ?? 0,
      cellProps: rowData => {
        const o: any = {};
        if (rowData.index === 0) {
          o.style = {
            backgroundColor: '#fedb61'
          };
        }
        return o;
      }
    },
    {
      title: `采样数据已上报`,
      key: 'taskStatusCounts.3',
      width: 120,
      titleAlign: 'center',
      align: 'right',
      render: row => row.taskStatusCountMap['3'] ?? 0,
      cellProps: rowData => {
        const o: any = {};
        if (rowData.index === 0) {
          o.style = {
            backgroundColor: '#fedb61'
          };
        }
        return o;
      }
    },
    {
      title: `小组已审核`,
      key: 'taskStatusCounts.4',
      width: 110,
      titleAlign: 'center',
      align: 'right',
      render: row => row.taskStatusCountMap['4'] ?? 0,
      cellProps: rowData => {
        const o: any = {};
        if (rowData.index === 0) {
          o.style = {
            backgroundColor: '#fedb61'
          };
        }
        return o;
      }
    },
    {
      title: `小组审核不通过`,
      key: 'taskStatusCounts.5',
      width: 120,
      titleAlign: 'center',
      align: 'right',
      render: row => row.taskStatusCountMap['5'] ?? 0,
      cellProps: rowData => {
        const o: any = {};
        if (rowData.index === 0) {
          o.style = {
            backgroundColor: '#fedb61'
          };
        }
        return o;
      }
    },
    {
      title: `平台已审核`,
      key: 'taskStatusCounts.6',
      width: 110,
      titleAlign: 'center',
      align: 'right',
      render: row => row.taskStatusCountMap['6'] ?? 0,
      cellProps: rowData => {
        const o: any = {};
        if (rowData.index === 0) {
          o.style = {
            backgroundColor: '#fedb61'
          };
        }
        return o;
      }
    },
    {
      title: `平台审核不通过`,
      key: 'taskStatusCounts.7',
      width: 120,
      titleAlign: 'center',
      align: 'right',
      render: row => row.taskStatusCountMap['7'] ?? 0,
      cellProps: rowData => {
        const o: any = {};
        if (rowData.index === 0) {
          o.style = {
            backgroundColor: '#fedb61'
          };
        }
        return o;
      }
    },
    {
      title: `总数量`,
      key: 'taskStatusCounts.7',
      width: 110,
      titleAlign: 'center',
      align: 'right',
      render: row =>
        (row.taskStatusCountMap['1'] ?? 0) +
        (row.taskStatusCountMap['2'] ?? 0) +
        (row.taskStatusCountMap['3'] ?? 0) +
        (row.taskStatusCountMap['4'] ?? 0) +
        (row.taskStatusCountMap['5'] ?? 0) +
        (row.taskStatusCountMap['6'] ?? 0) +
        (row.taskStatusCountMap['7'] ?? 0),
      cellProps: rowData => {
        const o: any = {};
        if (rowData.index === 0) {
          o.style = {
            backgroundColor: '#fedb61'
          };
        }
        return o;
      }
    }
  ];
}

columns = createColumns();

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务模型 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

const projectId = computed(() => {
  return props.projectData?.id;
});

const positionType = ref<string>('');

const tableData = ref<Api.Sampling.CjProject.ProgressVO[]>([]);

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 框架方法 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务方法 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

const searchParams = ref<Api.Sampling.CjProject.ProgressSearchParams>({
  positionType: positionType.value,
  projectId: projectId.value
});

function resetSearchParams() {
  searchParams.value = {
    projectId: props.projectData.id,
    positionType: ''
  };
  getData();
}

function calcTotalCount(rows: Api.Sampling.CjProject.ProgressVO[]) {
  const totalCount2 = createNumericMap();
  for (let i = 1; i <= rows.length; i += 1) {
    const item = rows[i - 1];
    if (item.taskStatusCountMap['1']) totalCount2['1'] += item.taskStatusCountMap['1'];
    if (item.taskStatusCountMap['2']) totalCount2['2'] += item.taskStatusCountMap['2'];
    if (item.taskStatusCountMap['3']) totalCount2['3'] += item.taskStatusCountMap['3'];
    if (item.taskStatusCountMap['4']) totalCount2['4'] += item.taskStatusCountMap['4'];
    if (item.taskStatusCountMap['5']) totalCount2['5'] += item.taskStatusCountMap['5'];
    if (item.taskStatusCountMap['6']) totalCount2['6'] += item.taskStatusCountMap['6'];
    if (item.taskStatusCountMap['7']) totalCount2['7'] += item.taskStatusCountMap['7'];
    item.index = i;
  }
  rows.splice(0, 0, {
    index: 0,
    orgId: '',
    orgName: '',
    provinceCityCountyInfo: {
      provinceId: '',
      provinceName: '',
      cityId: '',
      cityName: '',
      countyId: '',
      countyName: '汇总统计'
    },
    taskStatusCountMap: totalCount2
  });

  tableData.value = rows;
}

async function getData() {
  searchParams.value.projectId = props.projectData.id;
  const { error, data } = await fetchGetCjProjectProgress(searchParams.value);
  if (!error && data) {
    calcTotalCount(data);
  }
}

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 框架生命周期 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务生命周期 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

watch(
  () => projectId.value,
  () => {
    getData();
  },
  { deep: true }
);
</script>

<template>
  <div class="h-full flex-col-stretch gap-8px overflow-hidden lt-sm:overflow-auto">
    <ProgressSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
    <NCard :bordered="true" class="sm:flex-1-hidden card-wrapper" content-class="flex-col">
      <NDataTable
        striped
        size="small"
        :single-line="false"
        :columns="columns"
        :data="tableData"
        :bordered="true"
        :flex-height="true"
        class="sm:h-full"
      />
    </NCard>
  </div>
</template>

<style scoped></style>
